<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Indeterminate &lt;input type="checkbox"&gt; example</title>
  </head>

<body>
  <form>
    <fieldset>
    <legend>Complete the recipe</legend>
      <div>
        <input type="checkbox" id="enchantment" name="enchantment">
        <label for="enchantment">Enchantment table</label>
        <ul>
          <li>
            <input type="checkbox" id="book" name="ingredient" value="book">
            <label for="book">Book</label>
          </li>
          <li>
            <input type="checkbox" id="diamonds" name="ingredient" value="diamonds">
            <label for="diamonds">Diamonds (x2)</label>
          </li>
          <li>
            <input type="checkbox" id="obsidian" name="ingredient" value="obsidian">
            <label for="obsidian">Obsidian (x4)</label>
          </li>
        </ul>
      </div>
    </fieldset>
  </form>
  <script>
    const overall = document.querySelector('#enchantment');
    const ingredients = document.querySelectorAll('ul input');

    overall.addEventListener('click', (e) => {
      e.preventDefault();
    });

    for(const ingredient of ingredients) {
      ingredient.addEventListener('click', updateDisplay);
    }

    function updateDisplay() {
      let checkedCount = 0;
      for(const ingredient of ingredients) {
        if(ingredient.checked) {
          checkedCount++;
        }
      }

      if(checkedCount === 0) {
        overall.checked = false;
        overall.indeterminate = false;
      } else if(checkedCount === ingredients.length) {
        overall.checked = true;
        overall.indeterminate = false;
      } else {
        overall.checked = false;
        overall.indeterminate = true;
      }
    }
  </script>
</body>

</html>
